<template>
  <a-drawer
    :title="title"
    width="90%"
    :confirmLoading="loading"
    :maskClosable="false"
    placement="right"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
    :body-style="{ paddingBottom: '80px' }"
  >
    <a-form-model ref="form" :model="entity" v-bind="layout">
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="主要联系人">
            <a-input v-model="entity.LinkMan_Name" autocomplete="off" placeholder="主要联系人" />
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-model-item label="联系人电话">
            <a-input v-model="entity.LinkMan_Tel" autocomplete="off" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item prop="StyleName" label="客户名称">
            <a-input v-model="entity.Custom_Name" autocomplete="off" placeholder="请输入客户名称" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="电子邮件">
            <a-input v-model="entity.Mail_Box" autocomplete="off" placeholder="请输入电子邮件" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="客户编号">
            <a-input v-model="entity.Custom_Code" autocomplete="off" placeholder="请输入客户编号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="传真">
            <a-input :value="entity.Fax_Code" class="ant-input" placeholder="请输入传真" autocomplete="off" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="上级单位">
            <a-input v-model="entity.ParentID"> </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="网站">
            <a-input v-model="entity.Home_Page" autocomplete="off" placeholder="请输入网站" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="关系类型">
            <div>
              <a-radio-group v-model="entity.Custom_Type">
                <a-radio :value="1">
                  合作伙伴
                </a-radio>
                <a-radio :value="2">
                  客户
                </a-radio>
              </a-radio-group>
            </div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <h2>地址信息</h2>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="城市">
            <a-select v-model="entity.City_ID" default-value="选择城市" style="width: 380px" @change="city($event)">
              <a-select-option v-for="(item, dei) in list" :key="dei" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="省份">
            <a-select
              v-model="entity.Province_ID"
              default-value="选择省份"
              style="width: 380px"
              @change="village($event)"
            >
              <a-select-option v-for="(item, dei) in listChildren" :key="dei" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-model-item label="县级">
            <a-select v-model="entity.County_ID" default-value="选择县级" style="width: 380px">
              <a-select-option v-for="(item, dei) in county" :key="dei" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="电话">
            <a-input v-model="entity.Tel_Code" autocomplete="off" placeholder="电话" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="编码">
            <a-input v-model="entity.Post_Code" autocomplete="off" placeholder="编码" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="说明">
            <a-input :value="entity.Remark" class="ant-input" placeholder="说明" autocomplete="off" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <h2>开票信息</h2>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="名称">
            <a-input v-model="entity.Invoice_Title" autocomplete="off" placeholder="名称" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="纳税人识别号">
            <a-input v-model="entity.Invoice_Code" autocomplete="off" placeholder="纳税人识别号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="地址、电话">
            <a-input :value="entity.Invoice_BankAddr" class="ant-input" autocomplete="off" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="开户行及账号" prop="Remark">
            <a-textarea v-model="entity.Invoice_BankName" autocomplete="off" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="销售经理" prop="Remark">
            赵四
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="visible = false">取消</a-button>&nbsp;
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      value: 1,
      visible: false,
      list: [],
      listChildren: [], //市
      county: [], //县
      entity: {},
      title: '',
      loading: false
    }
  },
  mounted() {
    this.getlist()
  },

  methods: {
    //市
    city(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        //console.log('res', resJson)
        this.loading = false
        this.listChildren = resJson.Data
        //console.log('333', this.listChildren)
      })
    },
    //县
    village(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        //console.log('res', resJson)
        this.loading = false

        this.county = resJson.Data
        //console.log('333', this.county)

        // this.getlistUser()
      })
    },
    getlist(e) {
      // 省份
      // /Base_BasicData/Base_Region/GetDataList
      // /Base_BasicData/Base_District/GetDataListByPId?pId=0
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=0', {}).then(resJson => {
        //console.log('res', resJson)
        this.loading = false
        this.list = resJson.Data
        //console.log('333', this.list)

        // this.getlistUser()
      })
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Clt/Clt_Custom/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    openForm(title) {
      this.loading = false
      this.visible = true
      this.title = title
      if (id) {
        this.loading = true
        this.$http.post('/Clt/Clt_Custom/GetTheData', { id: id }).then(resJson => {
          this.loading = false

          this.entity = resJson.Data
        })
      }
    }
  }
}
</script>
